<template>
	<view :class="['boxBg', isMini? 'bgHMine':'bgHLarge']" :style="{backgroundImage:'url(' + bgImg + ')'}" @click.self="previewImage">
		<view class="dateBox">
			<text class="dateBoxHeader f_80 fw_500 tc_w">{{date.day}}</text>
			<view class="dateBoxFooter">
				<text class="f_20 fw_400 tc_w">{{date.month}}月, {{date.year}}</text>
			</view>
		</view>
		<view class="toggle" @click.stop="isMini = !isMini">
			<text :class="['iconfont', isMini? 'iconzoomIn':'iconzoomOut', 'f_42', 'tc_w']"></text>
		</view>
		<view class="boxFooter" :style="{height: isMini?'90rpx':'180rpx'}">
			<view :class="['saying', isMini?'text_line_1':'']">
				<text class="text f_24 fw_500 tc_w">{{saying}}</text>
			</view>
			<view class="refresh" @click.stop="init()">
				<text class="iconfont iconrefresh f_42 tc_w"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"fr-simple-clock",
		props: {
			// 是否为小组件, 默认是
			miniSize: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				isMini: this.miniSize,
				date: {
					year: 0,
					month: 0,
					day: 0,
				},
				bgImg: '',
				saying: '',
				refresh: false,
			};
		},
		mounted() {
			this.getDateInfo()
			this.init()
		},
		methods: {
			init() {
				const _this = this
				Promise.all([_this.getBg(), _this.getSaying()])
					.then(res => {
						console.log(res)
					})
					.catch(err => {
						console.log('catch', err)
					})
			},
			getDateInfo() {
				let time = new Date()
				this.date.year = time.getFullYear()
				this.date.month = time.getMonth() + 1
				this.date.day = time.getDate()
			},
			getBg() {
				const _this = this
				// _this.$api.get({
				// 	url: 'https://api.muxiaoguo.cn/api/meinvtu',
				// 	loadingTip: _this.refresh ? '获取数据中...' : '',
				// 	data: {
				// 		api_key: 'af53981ecded8128',
				// 		num: 1,
				// 	},
				// 	success: res => {
				// 		let img = res.data[0].imgurl
				// 		// _this.bgImg = 'https' + img.slice(-(img.length-4))
				// 		_this.bgImg = img
				// 	},
				// 	fail: err => {}
				// })
				
				return new Promise((resolve, reject) => {
					_this.$api.get({
						url: 'https://api.muxiaoguo.cn/api/meinvtu',
						loadingTip: _this.refresh ? '获取数据中...' : '',
						data: {
							api_key: 'af53981ecded8128',
							num: 1,
						},
						success: res => {
							let img = res.data[0].imgurl
							// _this.bgImg = 'https' + img.slice(-(img.length-4))
							_this.bgImg = img
							resolve(res.data[0])
						},
						fail: err => {
							reject(err)
						}
					})
				})
			},
			getSaying() {
				const _this = this
				// _this.$api.get({
				// 	url: 'https://api.muxiaoguo.cn/api/yiyan',
				// 	loadingTip: _this.refresh ? '获取数据中...' : '',
				// 	data: {
				// 		api_key: '9bc6919717fc9fb9'
				// 	},
				// 	success: res => {
				// 		_this.saying = res.data.constant
				// 	},
				// 	fail: err => {}
				// })
				
				return new Promise((resolve, reject) => {
					_this.$api.get({
						url: 'https://api.muxiaoguo.cn/api/yiyan',
						loadingTip: _this.refresh ? '获取数据中...' : '',
						data: {
							api_key: '9bc6919717fc9fb9'
						},
						success: res => {
							_this.saying = res.data.constant
							resolve(res.data)
						},
						fail: err => {
							reject(err)
						}
					})
				})
			},
			previewImage() {
				const _this = this
				uni.previewImage({
					urls: [_this.bgImg],
					indicator: 'none',
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.boxBg {
	width: 100%;
	height: 280rpx;
	// background-color: #F0AD4E;
	border-radius: 8rpx;
	position: relative;
	background-size: cover;
	background-position: center center;
	.dateBox {
		width: 110rpx;
		height: 126rpx;
		position: absolute;
		top: 28rpx;
		left: 36rpx;
		.dateBoxHeader {
			position: absolute;
			top: 0;
			right: 0;
			// text-shadow: 2rpx 2rpx 4rpx #eee;
		}
		.dateBoxFooter {
			position: absolute;
			bottom: 0;
			right: 0;
			// text-shadow: 2rpx 2rpx 4rpx #eee;
		}
	}
	.toggle {
		position: absolute;
		top: 28rpx;
		right: 36rpx;
	}
	.boxFooter {
		width: 100%;
		background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0));
		position: absolute;
		bottom: 0;
		left: 0;
		.saying {
			width: 78%;
			position: absolute;
			bottom: 36rpx;
			left: 36rpx;
		}
		.refresh {
			position: absolute;
			bottom: 36rpx;
			right: 36rpx;
		}
	}
}
.bgHLarge {
	animation: bgHLarge 0.5s linear 1;
	animation-fill-mode: forwards;
}
@keyframes bgHLarge {
	0% {
		height: 280rpx;
	}
	50%, 100% {
		height: 750rpx;
	}
}
.bgHMine {
	animation: bgHMine 0.5s linear 1;
	animation-fill-mode: forwards;
}
@keyframes bgHMine {
	0% {
		height: 750rpx;
	}
	50%, 100% {
		height: 280rpx;
	}
}
</style>
